<template>
    <div class="NavComp">
        <div class="NavCompHead">
            <img src="https://pic.imgdb.cn/item/642634ada682492fcc38c4a7.png" alt="">
            <div class="one-worl">
                <p>{{ oneWord.vhan }}</p>
                <p>—— {{ oneWord.source }}</p>
            </div>
        </div>
        <div class="NavComp-btn">
            <van-button @click="showPopup" icon="wap-home-o" color="#fff" block to="/">首页</van-button>
            <van-button @click="showPopup" icon="cluster-o" color="#fff" block to="/sortView">分类</van-button>
            <van-button @click="showPopup" icon="underway-o" color="#fff" block to="/timeStamp">归档</van-button>
            <van-button @click="showPopup" icon="smile-comment-o" color="#fff" block to="/messageBoard">留言板</van-button>
        </div>
    </div>
</template>
<script setup>
import { navOneWord } from "@/api/request";
import { ref, onMounted } from "vue";
import { useStore } from "../../store";
import { storeToRefs } from "pinia";
const store = useStore()
let { showLeft } = storeToRefs(store)

const showPopup = () => {
    showLeft.value = false
}

const oneWord = ref('')
// 随机一言
onMounted(() => {
    navOneWord().then(({ data }) => {
        oneWord.value = data.data
        // console.log(oneWord.value);
    })
})
</script>

<style lang="scss">
.NavComp {
    padding: 2.5rem .625rem;
    box-sizing: border-box;
    background-color: #f3f3f4;
    height: 100%;

    .NavCompHead {
        text-align: center;

        img {
            width: 7.5rem;
            height: 6.25rem;
            margin-bottom: .625rem;
        }

        .one-worl {
            p {
                font-weight: bold;
                font-family: '楷体';
                font-size: .75rem;
                margin: .5rem 0;
            }

            p:nth-child(1) {
                font-size: .8125rem;
            }

            p:nth-child(2) {
                text-align: right;
                padding-right: 10px;

            }
        }
    }

    // 导航按钮
    .NavComp-btn {

        .van-button {
            margin: 20px 0;

            .van-button__icon {
                color: black;
            }

            .van-button__text {
                font-weight: bold;
                color: #444;
            }
        }
    }
}
</style>